﻿<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="采购订单编号:"
                    >{{ entityObj.purchaseOrderCode }}</el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label-width="120px" label="要货单位:">{{ entityObj.storeName }}</el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item
                        label-width="120px"
                        label="申请人:"
                    >{{entityObj.applyName? entityObj.applyName:"无" }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="申请时间:"
                    >{{ entityObj.applyDate? entityObj.applyDate:"无" }}</el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item
                        label-width="120px"
                        label="期望到货时间:"
                    >{{ entityObj.expectedDate?entityObj.expectedDate:"无" }}</el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item 
                    label-width="120px" 
                    label="发货状态:"
                    >{{ entityObj.sendStatusDesc }}
                </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="发货时间:" label-width="120px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.sendDate"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="发货人:" label-width="120px">
                        <el-input
                            placeholder="---请输入发货人---"
                            v-model="queryList.sendName"
                            style="width: 160px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="物料名称:" label-width="120px">
                        <el-input
                            placeholder="---请输入物料名称---"
                            v-model="queryList.materialName"
                            style="width: 160px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px">
                        <el-button
                            :icon="Search"
                             
                            type="primary"
                            @click="handleSearch"
                        >查询</el-button>
                        <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="出库发货:">
                        <el-table
                            :data="entityObj.purchaseSendOrderItems"
                            border
                            style="width: 100%"
                        >
                            <el-table-column label="物料编码" width="110" prop="materialCode"></el-table-column>
                            <el-table-column label="物料名称" width="140" prop="materialName">
                                <template #default="scope">
                                    <div
                                        v-if="scope.row.materialImages && scope.row.materialImages.length > 0"
                                        style="color: #318cf2;"
                                        @click="handlePreview(scope.row)"
                                    >{{scope.row.materialName}}</div>
                                    <div v-else>{{scope.row.materialName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="规格" width="100" prop="materialSpecs"></el-table-column>
                            <el-table-column label="物料类别" width="130" prop="materialTypeName"></el-table-column>
                            <el-table-column label="单位" width="85" prop="unitName"></el-table-column>
                            <el-table-column label="本次发货" width="85" prop="qty"></el-table-column>
                            <el-table-column label="发货编号" width="150" prop="sendOrderCode"></el-table-column>
                            <el-table-column label="发货人" width="110" prop="sendName"></el-table-column>
                            <el-table-column label="发货时间" width="110" prop="sendDate">
                                <template #default="scope">{{scope.row.sendDate?.slice(0,10)}}</template>
                            </el-table-column>
                            <el-table-column label="物流详情" width="200" prop="logistics">
                                <template
                                    #default="scope"
                                >{{scope.row.logisticNsame}}{{scope.row.logisticsCode&&scope.row.logisticsCode.length >0?'('+scope.row.logisticsCode+')':"无"}}</template>
                            </el-table-column>
                            <el-table-column label="出库类型" width="100" prop="warehouseTypeDesc"></el-table-column>
                            <el-table-column label="出库仓库" width="120" prop="warehouseName"></el-table-column>
                            <el-table-column label="出库时间" width="110" prop="outDate">
                                <template #default="scope">{{scope.row.outDate?.slice(0,10)}}</template>
                            </el-table-column>
                            <el-table-column label="入库仓库"  prop="inWarehouseId" min-width="200"> 
                                <template #default="scope">
                                    <el-select placeholder="---请选择出库仓库 ---" v-model="scope.row.inWarehouseId" :disabled="scope.row.pendingTaskQty==0"
                                        style="width: 100%">
                                        <el-option label="---请选择---" value /> 
                                        <el-option v-for="item in scope.row.warehouses" :key="item.warehouseId"
                                            :label="item.warehouseName" :value="item.warehouseId" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="入库数量" min-width="120">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.qty" style="width: 100%" :precision="0" :step="1" :disabled="scope.row.pendingTaskQty==0"
                                        controls-position="right"></el-input-number>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="入库时间:">
                        <el-date-picker
                            v-model="taskEntityObj.inDate"
                            :default-time="defaultTime"
                            type="datetime"
                            value-format="YYYY-MM-DD"
                            format="YYYY-MM-DD"
                            placeholder="请输入要货时间"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="收货人:" prop="taskName">
                        <el-input v-model="taskEntityObj.taskName" />
                    </el-form-item>
                </el-col>
                
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="收货图片:">
                        <sc-upload-multiple
                            v-model="taskEntityObj.taskFileStr"
                            :objName="'Supply/TaskFiles'"
                            draggable
                            :uploadType="'OSS'"
                            :bucketName="'jtmc'"
                            :limit="8"
                            tip="最多上传8个文件,请上传图像格式文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary"  @click="confirmTask()">确认收货入库</el-button>
        </template>
    </el-dialog>

	<!-- 预览组件 -->
	<el-image-viewer v-if="showImage" @close="closeViewer" :hide-on-click-modal="true" :url-list="srcList" />
</template>
<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
			//预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            mode: "Send",
            titleMap: {
                Task: "物料收货",
            },
            entityObj: {},
            taskEntityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                purchaseProtocolName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                purchaseUnityName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                supplier: [
                    {
                        required: true,
                        type: "object",
                        message: "请填写",
                    },
                ],
                protocolDate: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                    },
                ],
                crName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                crDate: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                materialSpecs: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                purchaseProtocolItems: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                ],
                taskName: [
                    { required: true, type: "string", message: "请填写" },
                ],
                inDate: [
                    { required: true, type: "string", message: "请填写" },
                ],
            },
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsLogistics: [],
            itemsData: [],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    computed: {},
    methods: {
        //显示=
        open(mode = "Send") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
		//图片预览
        handlePreview(row) {
            console.log("row", row.materialImages);
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image
        },
        closeViewer() {
            this.showImage = false;
        },
        //表单注入数据
        async setData(data) {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "purchase-order/send-items/" + data,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj = {
                        ...returnValue.response,
                    };
                    this.itemsData =
                        returnValue.response.purchaseSendOrderItems;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        handleSearch() {
            var items = this.itemsData;
            if (this.queryList.sendDate) {
                items = items.filter((item) => {
                    return (
                        item.sendDate >= this.queryList.sendDate[0] &&
                        item.sendDate <= this.queryList.sendDate[1]
                    );
                });
            }

            if (this.queryList.sendName) {
                items = items.filter((item) => {
                    return item.sendName.includes(this.queryList.sendName);
                });
            }
            if (this.queryList.materialName) {
                items = items.filter((item) => {
                    return item.materialName.includes(
                        this.queryList.materialName
                    );
                });
            }
            this.entityObj.purchaseSendOrderItems = items;
        },
        resetSearch() {
            this.queryList = {};
        },
        formatDate(date, type = 0) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hours = String(date.getHours()).padStart(2, "0");
            const minutes = String(date.getMinutes()).padStart(2, "0");
            const seconds = String(date.getSeconds()).padStart(2, "0");

            return type == 0
                ? `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
                : `${year}-${month}-${day}`;
        },
         //确认收货
         async confirmTask() {
            try {
             
                this.entityObj={...this.entityObj,...this.taskEntityObj};
                console.log("this.entityObj",this.entityObj);
                var returnValue = await this.$API.auth.PostProcessApi.post( `purchase-order/purchaseTask`,{...this.entityObj});
                if (returnValue.status == 200) {
                  this.visible=false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        this.taskEntityObj.taskName = tool.data.get("USER_INFO").Name;
        this.taskEntityObj.inDate = this.formatDate(new Date(),1);
    },
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 8px !important;
}
</style>
